<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="订单详情"
        left-arrow
        @click-left="$router.back()"
      />
    </header>
    <!-- 去注册组件 -->
    <div class="content">
      <van-address-list
        :list="addressList"
        default-tag-text="默认"
        @edit="onEdit"
      />
      <h3>订单号：{{orderData.orderId}}</h3>
      <van-card v-for='val in proData' :key='val.proId'
        :num="val.num"
        :price="val.price"
        :title="val.proName"
        :thumb="val.proImg"
      />
      <!-- 优惠券单元格 -->
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
      <van-submit-bar :price="allPrice" button-text="付款" @submit="onSubmit" />
    </div>
    <van-popup v-model="show">
      <img :src="payImg" alt="">
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { AddressList, Card, CouponCell, CouponList, Popup, SubmitBar } from 'vant'
import { getOrderDetail, getAddress, getCoupon } from '../../api/index.js'

Vue.use(AddressList)
Vue.use(Card)
Vue.use(CouponCell)
Vue.use(CouponList)
Vue.use(Popup)
Vue.use(SubmitBar)

export default {
  data () {
    return {
      addressList: [],
      proData: [],
      orderData: {},
      chosenCoupon: -1,
      coupons: [],
      disabledCoupons: [],
      showList: false,
      payImg: '',
      show: false
    }
  },
  props: ['id'],
  mounted () {
    // 获取一个订单
    getOrderDetail({
      userId: localStorage.getItem('userId'),
      orderId: this.id
    }).then(res => {
      console.log(res.data)
      this.proData = res.data.data.proData
      // 方便操作订单
      this.orderData = res.data.data
      console.log(this.orderData, this.proData)
      getAddress().then(data => {
        this.addressList = data
      })
    })
    getCoupon().then(data => {
      this.coupons.push(data)
    })
  },
  methods: {
    onEdit () {},
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
      // console.log('选择了优惠券')
      // console.log(this.chosenCoupon)
    },
    onExchange (code) {
      // this.coupons.push(coupon)
    },
    onSubmit () {
      // this.show = true
      // 生成二维码
      // wxPay({
      //   body: '王元福俱乐部',
      //   out_trade_no: this.id,
      //   total_fee: 1
      // }).then(res => {
      //   console.log('已付款')
      //   console.log(res.data.data)
      //   this.payImg = res.data.data
      // })
      // 修改订单状态
      // pay({
      //   userId: localStorage.getItem('userId'),
      //   orderId: this.id
      // }).then(res => {
      //   console.log('已付款')
      //   // 重新跳转路由
      //   this.$router.push('/order')
      // })
    }
  },
  computed: {
    allPrice () {
      // console.log(this.chosenCoupon)
      const sum = this.proData.reduce((prev, next) => {
        return prev + next.num * next.price
      }, 0) * 100
      if (this.chosenCoupon !== -1) {
        return sum - this.coupons[this.chosenCoupon].value
      }
      return sum
    }
  }
}
</script>

<style lang="scss">
.van-address-list {
  height: 1rem;
  padding: 0;
  .van-address-list__add {
    display: none;
  }
  .van-radio__icon {
    display: none;
  }
}
</style>
